<template>
  <div class="deal_petition_wrap">
    <div class="head">
      <el-button
        icon="el-icon-arrow-left"
        style="width:70px;padding:0px;height:36px;"
        @click="goBack"
      >返回</el-button>
      <span
        style="float:right;display:inline-block;min-width:300px;text-align:right"
      >当前位置：监督举报 / 信访举报 / 信访举报详情</span>
    </div>
    <div class="title_wrap">— 举报的详情页这里展示举报的标题 —</div>
    <div class="content_wrap first_wrap">
      <div class="content_head">
        <span class="sign_line"></span>
        <span class="sign_title">被举报人</span>
      </div>
      <div class="content">
        <div class="row">
          <div class="row_title">被举报人</div>
          <div class="row_record">冯宝宝</div>
          <div class="row_title">被举报人单位</div>
          <div class="row_record">哪都通</div>
          <div class="row_title">被举报人职务</div>
          <div class="row_record" style="border-right: 1px solid rgba(232, 232, 232, 1);">临时工</div>
        </div>
        <div class="row">
          <div class="row_title">当前状态</div>
          <div class="row_record">待处理</div>
          <div class="row_title">级别</div>
          <div class="row_record">博士</div>
          <div class="row_title">问题类型</div>
          <div class="row_record" style="border-right: 1px solid rgba(232, 232, 232, 1);">违反组织纪律</div>
        </div>
        <div class="row">
          <div class="row_title" style="border-bottom: 1px solid rgba(232, 232, 232, 1);">问题细类</div>
          <div
            class="row_record"
            style="width:1400px;border-right: 1px solid rgba(232, 232, 232, 1);border-bottom: 1px solid rgba(232, 232, 232, 1);"
          >违反政治纪律</div>
        </div>
      </div>
    </div>
    <div class="content_wrap">
      <div class="content_head">
        <span class="sign_line"></span>
        <span class="sign_title">举报详情</span>
      </div>
      <div class="content">
        <div
          class="desc"
        >如须与程保山级见达造统安山价争该着布见选史育每马增容运织习细酸亲发比很我上数儿水半点成每较科属规消些很百他那飞。适现难少技业适劳总身里市维支究她军农太总八进来认通东习大阶或人第口精报快华着格法完转格示进相走从组直为众有使花电位格府花们万务别只联离育数统消养图象理于。电才干政委到具段被带感按开把列法际子值起马可相六一住层响极下原素月变造报专联件西作温能照市入布已节计由片。要提联百接同斯形等调满代流消置消业少厂南始收强且济同识变常定影叫效且没省的万应院共受社样素新精存细口多统海划情现张毛其难本处便信据才始立须家省边而标局。全它二空间养及单广可色选养技手求从那者米老任儿数结动领并造因素别太共值万意比活事么体应白工度设。研产段拉问第包意空率就育照位数马保例议参委非目近部两精个类影长安时何手两基接东市步飞引队第务。许着育管上东片一水内经和除众图对太体六况专军日统没只织复前以各消等府当比除商布亲己即支器想难风革少想务也山或入广回连阶正天心济书报至水很比没条火军级。当事北制他斯型展造准必即感心真百连导样书格共年数决厂长二见开持当心住所身么中天。组议正目队合目路七验产明劳每型府群且离但计大整过科特标情厂领转场者同规持并复前点候太样公八变二设平分西成并大。</div>
        <div class="attach_list_wrap" v-if="fileList.length>0">
          <div v-for="(item,index) in fileList" :key="index" class="attach">
            <div class="taskMidFileConterSon">
              <div class="taskMidFileConterSonLeft">
                <img src="@/assets/image/pdf.png" />
              </div>
              <div class="taskMidFileConterSonRight">
                <div class="sonRightTop">{{item.name}}</div>
                <div class="sonRightBot">
                  <div class="sonRightBotLeft">{{item.size}}</div>
                  <div class="sonRightBotRight">
                    <img
                      class="sonRightBotRightInmage"
                      src="@/assets/image/download.png"
                      @click="downloadReportFile(item.id)"
                    />
                    <div class="sonRightBotRightText">下载</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_wrap">
      <div class="content_head">
        <span class="sign_line"></span>
        <span class="sign_title">举报人信息</span>
      </div>
      <div class="content">
        <div class="row">
          <div class="row_title">举报人姓名</div>
          <div class="row_record">张三</div>
          <div class="row_title">身份证号</div>
          <div class="row_record">321183199512233831</div>
          <div class="row_title">身份证号</div>
          <div
            class="row_record"
            style="border-right: 1px solid rgba(232, 232, 232, 1);"
          >15105182356</div>
        </div>
        <div class="row">
          <div class="row_title">政治面貌</div>
          <div class="row_record">党员</div>
          <div class="row_title">现居地址</div>
          <div class="row_record">南京市雨花台</div>
          <div class="row_title">工作单位</div>
          <div class="row_record" style="border-right: 1px solid rgba(232, 232, 232, 1);">南京新世界科技</div>
        </div>
        <div class="row">
          <div class="row_title">举报时间</div>
          <div class="row_record">违反政治纪律</div>
          <div class="row_title">举报方式</div>
          <div class="row_record">匿名举报</div>
          <div class="row_title">举报渠道</div>
          <div class="row_record" style="border-right: 1px solid rgba(232, 232, 232, 1);">二维码</div>
        </div>
        <div class="row">
          <div class="row_title" style="border-bottom: 1px solid rgba(232, 232, 232, 1);">查询码</div>
          <div
            class="row_record"
            style="width:1400px;border-right: 1px solid rgba(232, 232, 232, 1);border-bottom: 1px solid rgba(232, 232, 232, 1);"
          >23SDIU8</div>
        </div>
      </div>
    </div>
    <div class="content_wrap" v-if="status==1">
      <div class="content_head">
        <span class="sign_line"></span>
        <span class="sign_title">审核意见</span>
      </div>
      <div class="content">
        <div class="row">
          <div
            class="row_title"
            style="height:80px;line-height:80px;border-bottom: 1px solid rgba(232, 232, 232, 1);"
          >审核意见</div>
          <div
            class="row_record"
            style="padding:10px 0 10px 20px;height:80px;width:1400px;border-right: 1px solid rgba(232, 232, 232, 1);border-bottom: 1px solid rgba(232, 232, 232, 1);"
          >
            <textarea
              placeholder="填写信息受理意见，驳回时必填。"
              style="line-height:30px;border:0px solid transparent;width:100%;height:60px;resize:none;outline:none;over-flow:hidden;"
            >1111</textarea>
          </div>
        </div>
        <div style="margin-top:36px;text-align:center">
          <el-button style="width:70px;padding:0px;height:36px;" @click="goBack">返回</el-button>
          <el-button style="width:70px;padding:0px;height:36px;" @click="goBack">驳回</el-button>
          <el-button type="primary" style="width:70px;padding:0px;height:36px;" @click="goBack">受理</el-button>
        </div>
      </div>
    </div>
    <div class="content_wrap" v-if="status==2">
      <div class="content_head">
        <span class="sign_line"></span>
        <span class="sign_title">审核意见</span>
      </div>
      <div class="content">
        <div class="row">
          <div class="row_title">举报人姓名</div>
          <div class="row_record">张三</div>
          <div class="row_title">身份证号</div>
          <div class="row_record">321183199512233831</div>
          <div class="row_title">身份证号</div>
          <div
            class="row_record"
            style="border-right: 1px solid rgba(232, 232, 232, 1);"
          >15105182356</div>
        </div>
        <div class="row">
          <div
            class="row_title"
            style="height:80px;line-height:80px;border-bottom: 1px solid rgba(232, 232, 232, 1);"
          >审核意见</div>
          <div
            class="row_record"
            style="height:80px;width:1400px;border-right: 1px solid rgba(232, 232, 232, 1);border-bottom: 1px solid rgba(232, 232, 232, 1);"
          >通过</div>
        </div>
      </div>
    </div>
    <div class="opt_wrap">
      <el-button type="primary" style="width:70px;padding:0px;height:36px; float:right;margin-top:10px" @click="goBack">导出</el-button>
    </div>
  </div>
</template>
<script>
export default {
  
  data() {
    return {
      status: "2",
      fileList: [
        {
          id: "1",
          name: "举报文档信息01.PDF",
          size: "11.6M",
        },
        {
          id: "2",
          name: "举报文档信息02.PDF",
          size: "11.6M",
        },
        {
          id: "3",
          name: "举报文档信息03.PDF",
          size: "11.6M",
        },
        {
          id: "4",
          name: "举报文档信息04.PDF",
          size: "11.6M",
        },
        {
          id: "5",
          name: "举报文档信息05.PDF",
          size: "11.6M",
        },
      ],
    };
  },
  methods:{
    goBack(){
     this.$router.push({name:'PetitionReport'})
    }
  },
  components: {},
};
</script>
<style lang="less" scoped>
.deal_petition_wrap {
  width: 100%;
  min-width: 800px;
  height: 100%;
  position: relative;
  .head_wrap {
    min-width: 500px;
  }
  .title_wrap {
    height: 30px;
    font-size: 22px;
    font-weight: 600;
    color: #333;
    line-height: 30px;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  .opt_wrap{
    width: 100%;
    //height: 226px;
    background: #fff;
    margin-top: 10px;
    height: 56px;
  }
  .content_wrap {
    padding: 25px 20px 20px 20px;
    width: 100%;
    //height: 226px;
    background: #fff;
    margin-top: 10px;
    .content_head {
      .sign_line {
        display: inline-block;
        height: 14px;
        width: 4px;
        background: #3d7fff;
        transform: translateY(1px);
      }
      .sign_title {
        height: 16px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        line-height: 16px;
        margin-left: 10px;
      }
    }
    .content {
      margin-top: 18px;
      .row {
        display: flex;
        .row_title {
          padding-left: 10px;
          width: 140px;
          height: 46px;
          line-height: 46px;
          background: rgba(250, 250, 250, 1);
          border-top: 1px solid rgba(232, 232, 232, 1);
          border-left: 1px solid rgba(232, 232, 232, 1);
          border-right: 1px solid rgba(232, 232, 232, 1);
          font-size: 14px;
          font-weight: 600;
          color: #333;
        }
        .row_record {
          padding-left: 20px;
          width: 372px;
          height: 46px;
          font-size: 14px;
          color: #333;
          line-height: 46px;
          border-top: 1px solid rgba(232, 232, 232, 1);
        }
      }
      .attach_list_wrap {
        display: flex;
        flex-wrap: wrap;
        .attach {
          width: 360px;
          height: 80px;
          background: #fff;
          border-radius: 4px;
          border: 1px solid #ddd;
          margin-right: 20px;
          margin-top: 17px;
          .taskMidFileConterSon {
            height: 50px;
            margin: 15px;
            display: flex;

            .taskMidFileConterSonLeft {
              height: 50px;
              width: 50px;

              img {
                height: 50px;
                width: 50px;
              }
            }

            .taskMidFileConterSonRight {
              width: 265px;
              height: 50px;
              margin-left: 15px;

              .sonRightTop {
                height: 32px;
                color: #333333;
                font-size: 16px;
                line-height: 16px;
                display: flex;
                align-items: center;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
              }

              .sonRightBot {
                height: 25px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .sonRightBotLeft {
                  width: 70px;
                  height: 16px;
                  color: #999999;
                  font-size: 14px;
                  line-height: 16px;
                }

                .sonRightBotRight {
                  width: 150px;
                  height: 16px;
                  color: #3d7fff;
                  font-size: 14px;
                  line-height: 16px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;

                  .sonRightBotRightImg {
                    height: 12px;
                    width: 16px;
                    cursor: pointer;
                  }

                  .sonRightBotRightText {
                    height: 16px;
                    width: 30px;
                    margin-left: 5px;
                  }

                  .sonRightBotRightLine {
                    margin-left: 15px;
                    margin-right: 15px;
                    width: 1px;
                    height: 12px;
                    background: #cccccc;
                  }

                  .sonRightBotRightInmage {
                    height: 12px;
                    width: 14px;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .coentent,
  .first_wrap {
    margin-top: 25px;
  }
}
</style>
